<template>
  <svg 
    class="fire-icon" 
    viewBox="0 0 1024 1024" 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
  >
    <path 
      d="M813.791929 239.816924c-126.014018 35.014468-149.063991 134.312008-140.930753 197.410092-89.868797-102.998839-86.187965-221.481324-86.187965-392.173914C298.468231 151.023622 365.467157 456.500988 356.824313 549.252439c-72.470545-57.847499-86.148056-196.061374-86.148056-196.061374-76.556607 38.387285-114.927519 140.912333-114.927519 224.089731 0 201.091948 167.227676 364.145557 373.482203 364.145557 206.253504 0 373.48118-163.05361 373.48118-364.145557C902.711098 457.758632 812.695968 402.612661 813.791929 239.816924z" 
      :fill="color"
    />
  </svg>
</template>

<script>
export default {
  name: 'FireIcon',
  props: {
    size: {
      type: [Number, String],
      default: 16
    },
    color: {
      type: String,
      default: '#d81e06'
    }
  }
}
</script>

<style scoped>
.fire-icon {
  display: inline-block;
  vertical-align: middle;
}
</style>
